//
//  BannerView.swift
//  SwiftUI_App
//
//  Created by qingzhou on 2021/6/22.
//

import SwiftUI

struct BannerView: View {
    
    @EnvironmentObject var homeViewModel: HomeViewModel
    
    ///swiftUI对定时器的简化
    private let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
    /// 拖拽的偏移量
    @State var dragOffset:CGFloat = .zero
    ///当前现实的位置索引，
    ///这是实际数据中的1就是数据没有被处理之前的0的位置的图片
    ///所以这里默认从1开始
    @State var currentIndex: Int = 1
    ///是否需要动画
    @State var isAnimation:Bool = true
    
    let spacing: CGFloat = 10
    
    var body: some View {
        
        /// 单个子视图偏移量 = 单个视图宽度 + 视图的间距
        let currentOffset = CGFloat(currentIndex) * (homeViewModel.homeBannerWidth + spacing)
        /// GeometryReader 改变了它显示内容的方式。在 iOS 13.5 中，内容放置方式为 .center。在 iOS 14.0 中则为：.topLeading
        GeometryReader { proxy in
            ZStack(alignment: .bottom) {
                HStack(spacing: spacing) {
                    ForEach(0..<homeViewModel.homeBannerCount()) {
                        /*
                        如果想自定义Image大小，可以添加frame
                        clipped()相当于UIKit里的clipsToBounds,
                        与aspectRatio(contentMode: .fill)搭配使用。
                           
                        注意：frame 要放在resizable后面，否则报错,
                        如果需求裁剪，需要放在aspectRatio后面，
                        clipped()前面，否则frame失效 */
                        
                        Image(homeViewModel.bannerImage($0))
                            .resizable()
                            .frame(width: proxy.size.width,
                                   height: $0 == currentIndex ? proxy.size.height:proxy.size.height*0.8 )
                            .clipped() /// 裁减
                            .cornerRadius(10)
                    }
                }
                .frame(width:proxy.size.width,
                       height:proxy.size.height,alignment:.leading)
                 .offset(x: dragOffset - currentOffset)
                 .gesture(dragGesture)
                 /// 绑定是否需要动画
                 .animation(isAnimation ?.spring():.none)
                 /// 监听当前索引的变化,最开始初始化为0是不监听的，
                 .onChange(of: currentIndex, perform: { value in
//                    if (value == homeViewModel.homeBannerCount() - 1)
                    isAnimation = true
                    /// 第一张的时候
                    if value == 0 {
                        
                        isAnimation.toggle()
                        currentIndex = homeViewModel.homeBannerCount() - 2
                    /// 最后一张的时候currentIndex设置为1关闭动画
                    }else if value == homeViewModel.homeBannerCount() - 1 {
                        
                        isAnimation.toggle()
                        currentIndex = 1
                    }
                 })
                 /// 对定时器的监听
                 .onReceive(timer, perform: { _ in
                    currentIndex += 1
                 })
                HStack{
                    ForEach(1..<homeViewModel.homeBannerCount() - 1) {
                        CircleDot(isSelected: $0 == currentIndex)
                    }
                }
                .offset(y: -20)
            }
            
            
        }
        .frame(width: homeViewModel.homeBannerWidth, height: homeViewModel.homeBannerHeight)
    }
    
}

extension BannerView {
    ///定义拖拽手势
    private var dragGesture: some Gesture {
        DragGesture()
            ///拖动改变
            .onChanged {
                isAnimation = true
                dragOffset = $0.translation.width
            }
            ///结束
            .onEnded {
                dragOffset = .zero
                /// 拖动右滑，偏移量增加，显示 index 减少
                if $0.translation.width > 50{
                    currentIndex -= 1
                }
                /// 拖动左滑，偏移量减少，显示 index 增加
                if $0.translation.width < -50{
                    currentIndex += 1
                }
                /// 防止越界
                currentIndex = max(min(currentIndex, homeViewModel.homeBannerCount() - 1), 0)
            }
    }
}

struct CircleDot:View {//小圆点
    var isSelected:Bool
    var body: some View {
        if isSelected {
            Circle()
                .frame(width: 10, height: 10)
                .foregroundColor(.green)
        } else {
            Circle()
                .frame(width: 10, height: 10)
                .foregroundColor(.gray)
        }
        
        
    }
}

struct BannerView_Previews: PreviewProvider {
    static var previews: some View {
        BannerView()
    }
}
class ImageModel: Identifiable {
    var id:UUID?
    var imageName:String?
    required init(imageName:String?) {
        self.imageName = imageName
        self.id = UUID()
    }
}
